<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前台收银</title>
    <script src="/static/bootstrap-3.3.7/js/jquery.min.js"></script>
    <style type="text/css">
        input {
            margin-top: 540px;
        }

        #write {
            margin-top: 0px;
            border-radius: 10px;
            border: 1px solid #ccc;
            padding: 7px 0px;
        }

        #center div {
            margin-top: 10px;
        }

        #right {
            float: left;
            width: 900px;
            height: 64px;
            background-color: white;
            margin-left: 20px;
        }

        #right div {
            float: left;
            margin-left: 10px;
        }

        #change {
            width: 900px;
            height: 500px;
            float: left;
            margin-top: 10px;
            margin-left: 20px;
            background-color: white;
        }
        a{text-decoration:none}
        #center div{
            text-align: center;
            line-height: 64px;
        }
    </style>
</head>
<script type="text/javascript">
    function load(){
        window.setInterval('showRealTime(clock)',1000);
    }
</script>
<body style="background: grey;" onload="load()">

<%--
<div id="center" style="float: left;margin-left: 10px">
    <div style="background-color:white;width: 120px;height: 64px;margin-top: 0px">
        <img src="../../../static/images/cut.png" height="67" width="120"/>
    </div>
    <div style="background-color:white;width: 120px;height: 64px">
        <img src="../../../static/images/plus.png" height="64" width="119"/>
    </div>
    <div style="background-color:white;width: 120px;height: 64px;">
        <h4>数量n</h4>
    </div>
    <div style="background-color:white;width: 120px;height: 64px">
        <h4>折扣o</h4>
    </div>
    <div style="background-color:white;width: 120px;height: 64px">
        <h4>改价g</h4>
    </div>
    <div style="background-color:white;width: 120px;height: 64px">
        <h4>删除d</h4>
    </div>
</div>--%>

<div id="right" style="width: 100%">
    <div style="height: 10px;width: 130px;background-color:white;text-align: center;margin-top: 25px">
        <a id="all_products" href="#">所有分类</a>
    </div>
    <div style="height: 10px;width: 130px;background-color:white;text-align: center;margin-top: 25px">
        <a href="#">五金分区</a>
    </div>
    <div style="height: 10px;width: 130px;background-color:white;text-align: center;margin-top: 25px">
        <a href="#">水管材料</a>
    </div>
</div>
<script>
    $("#all_products").click(function () {
        $.post("/productStock/cahsier",{},function (data) {
            $("#change").html(data);
        });
    });
</script>
<div id="change" style="width: 650px;"></div>

<div id="sidebar" style="float: right;">
    <input id="write" type="text" style="width: 340px; height: 60px" placeholder="条码/助词码（大写）/价格（0~100000)">
    <div style="height: 100px;width: 340px;background-color:white;">
        <div id="clock"></div>
        <span>每日单号:xxx</span>
        <script type="text/javascript">
            function showRealTime(clock){
                var d = new Date();
                var year = d.getFullYear();
                var month = d.getMonth() + 1;
                var date = d.getDate();
                var days = new Array("日","一","二","三","四","五","六");
                var day = d.getDay();
                var hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours();
                var min = (d.getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes();
                var sec = (d.getSeconds() < 10) ? ("0" + d.getSeconds()) : d.getSeconds();
                var now = year + "年" + month + "月" + date + "日<br>星期" + days[day] + "" + hour + ":" + min + ":" + sec;
                clock.innerHTML = "销售时间：" + now;
            }
        </script>
    </div>
    <div style="height: 400px;width: 340px;background: white">
        <input type="button" value="选择会员" style="width: 100px;float:right;height: 60px;background: #ff6666;border: 0px">
        <input type="button" value="结算" style="width: 100px;float:right; height: 60px;background: #ff6666;border: 0px" >
    </div>
</div>

</body>
</html>